<template>
  <div class="capital">
    <h4>我的人民币账户</h4>
    <!-- 余额 -->
    <ul class="clearfix">
      <li>
        <div class="box-item">
          <div>
            可用余额：<span class="unit">￥</span
            ><span class="price">0.00</span>
          </div>
          <button class="active">立即充值</button>
        </div>
      </li>
      <li>
        <div class="box-item">
          <div>
            消费金额：<span class="unit">￥</span
            ><span class="price">0.00</span>
          </div>
          <button>消费记录</button>
        </div>
      </li>
    </ul>
    <ul class="desc">
      <li>
        提交代购订单后，订单需要审核，支付金额会暂时被冻结。在订单商品成功订购后，支付金额会解冻。
      </li>
    </ul>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="充值记录" name="first">
          <el-table
            :data="
              tableData.filter(
                (data) =>
                  !search ||
                  data.name.toLowerCase().includes(search.toLowerCase())
              )
            "
            style="width: 100%"
          >
            <el-table-column label="时间" prop="time"> </el-table-column>
            <el-table-column label="充值金额" prop="money"> </el-table-column>
            <el-table-column label="充值方式" prop="mode"> </el-table-column>
            <el-table-column label="交易号" prop="transaction">
            </el-table-column>
            <el-table-column label="当前余额" prop="nowmoney">
            </el-table-column>
            <el-table-column align="right" label="操作" prop="nowmoney">
              
            </el-table-column>
            <div slot="empty" style="text-align: left">
              <el-empty
                description="暂无记录"
                image="https://s1.KoKo.com/transports/static/icon_goods_none.png"
                :image-size="44"
                style="margin-top: 70px"
              />
            </div>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="退款记录" name="second">
          <el-table
            :data="
              tableData.filter(
                (data) =>
                  !search ||
                  data.name.toLowerCase().includes(search.toLowerCase())
              )
            "
            style="width: 100%"
          >
            <el-table-column label="申请日期" prop="time"> </el-table-column>
            <el-table-column label="申请金额" prop="money"> </el-table-column>
            <el-table-column label="账号" prop="mode"> </el-table-column>
            <el-table-column label="状态" prop="transaction">
            </el-table-column>
            
            <el-table-column align="right" label="操作" prop="doit">
              
            </el-table-column>
            <div slot="empty" style="text-align: left">
              <el-empty
                description="暂无记录"
                image="https://s1.KoKo.com/transports/static/icon_goods_none.png"
                :image-size="44"
                style="margin-top: 70px"
              />
            </div>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      tableData: [],
    };
  },
  
};
</script>

<style lang="scss" scoped>
::v-deep .center {
  height: 746px;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
}
h4 {
  margin-bottom: 40px;
  width: 150px;
  padding: 10px;
  font-size: 18px;
  font-weight: 700;
  color: #ff6e6e;
  border-bottom: 3px solid #ff6e6e;
}
.capital {
  background-color: #fff;
  padding: 10px 20px 20px;
  float: right;
  width: 960px;
  min-height: 540px;
  .clearfix {
    li {
      float: left;
      width: 33.3%;
      padding: 30px 0;
      font-size: 16px;
      color: #333;
      text-align: center;
      .box-item {
        position: relative;
        .unit {
          padding-left: 10px;
          font-weight: 700;
        }
        .price {
          font-weight: 700;
          font-size: 24px;
        }
        button {
          display: inline-block;
          width: 170px;
          height: 44px;
          margin-top: 20px;
          line-height: 44px;
          text-align: center;
          color: #ff6e6e;
          border: 1px solid #ff6e6e;
          text-decoration: none;
          cursor: pointer;
          border-radius: 22px;
          background-color: white;
        }
        .active {
          background-color: #ff6e6e;
          color: white;
        }
      }
    }
  }
  .desc {
    background-color: #ffe9e9;
    font-size: 12px;
    padding: 18px;
    color: #666;
    list-style-type: disc;
  }
}
::v-deep .el-tabs__header {
    position: relative;
    margin: 0 0 15px;
}
::v-deep .el-tabs__nav-scroll {
  margin-top: 20px;
  background: #f5f5f5;
  
}
::v-deep .el-tabs__active-bar {
    background-color: #ff6e6e;
}
::v-deep .el-tabs__item {
    padding: 0 20px;
    height: 40px;
    box-sizing: border-box;
    line-height: 40px;
    display: inline-block;
    list-style: none;
    font-size: 20px;
    font-weight: bold;
    color: #303133;
    position: relative;
}
</style>